/*<li class="list-group-item d-flex justify-content-between align-items-center">
	学习 HTML
	<!--在bootstrap 里搜 Close 是叉号-->
	<button type="button" class="close" aria-label="Close">&times;</button>
</li>
*/
//数据
let lists = ["学习  JavaScript", "学习  CSS3", "学习  HTML5"];

function d() {
	//先清空UL里面的LI，然后用for循环添加Li
	document.querySelector("#ul").innerHTML = '';
	//创建for循环
	for(let i = 0; i < lists.length; i++) {
		//创建li标签
		let li = document.createElement("li");
		//添加  class名
		li.classList.add('list-group-item');
		li.classList.add('d-flex');
		li.classList.add('justify-content-between');
		li.classList.add('align-items-center');

		//创建span标签
		let span = document.createElement("span");
		//文本节点
		let spanText = document.createTextNode(lists[i]);
		//把文本内容追加到创建的span标签里
		span.appendChild(spanText);
		//修改
		//给span添加一个双击事件
		span.addEventListener('dblclick', function() {
			console.log(this);
			//给span 标签添加一个可编辑的属性
			//setAttribute() 方法添加指定的属性，并为其赋指定的值。
			//contenteditable 属性规定元素内容是否可编辑。
			this.setAttribute('contenteditable', true);
		})

		//创建button标签
		let button = document.createElement("button");
		button.type = 'button';
		button.classList.add('close');
		button.innerHTML = '&times;';
		//删除
		button.addEventListener('click', function() {
			console.log(i);
			//删除一条指定的数组
			lists.splice(i, 1);
			//把lists数组的数据，显示在前台
			d();
		})

		//把span和button追加到li
		li.appendChild(span);
		li.appendChild(button);

		//把li追加到ul
		let ul = document.querySelector('#ul');
		ul.appendChild(li);
	}
}
d();

//添加
let ipt = document.querySelector("#ipt");
let btn = document.querySelector("#btn");
btn.addEventListener('click', function() {
	if(ipt.value != '') {
		//把表单的数据放进数组
		lists.push(ipt.value);
	} else {
		alert('不可以为空');
	}
	//把lists数组的数据，显示前台
	d();
})